<template>
	<view class="pageBg">
		<view class="container shadowBox">
			<view class="header">
				<view class="selectorBox flex_c_c_fs" @click.stop="showSelector">
					<view class="selectorTop margin_b8 flex_r_fs_c">
						<text class="f_40 fw_600 tc_1 margin_r8">{{curCons.name}}</text>
						<view class="down-triangle"></view>
					</view>
					<text class="f_24 fw_500 tc_9">{{curCons.date}}</text>
				</view>
				<text class="consIcon iconfont" :class="curCons.icon"></text>
			</view>
			<view class="baseInfo margin_b32 flex_r_fs_c">
				<view class="cnt">
					<view class="cntItem flex_r_fs_c">
						<view class="cntItemHeader f_28 fw_500 tc_9 margin_r16 flex_r_fe_c">
							<text>性格特征: </text>
						</view>
						<view class="f_28 fw_500 tc_1">
							<text>{{consData.zxtd}}</text>
						</view>
					</view>
					<view class="cntItem flex_r_fs_c">
						<view class="cntItemHeader f_28 fw_500 tc_9 margin_r16 flex_r_fe_c">
							<text>属性: </text>
						</view>
						<view class="f_28 fw_500 tc_1">
							<text>{{consData.sssx}}</text>
						</view>
					</view>
					<view class="cntItem flex_r_fs_c">
						<view class="cntItemHeader f_28 fw_500 tc_9 margin_r16 flex_r_fe_c">
							<text>十二宫位: </text>
						</view>
						<view class="f_28 fw_500 tc_1">
							<text>{{consData.zggw}}</text>
						</view>
					</view>
					<view class="cntItem flex_r_fs_c">
						<view class="cntItemHeader f_28 fw_500 tc_9 margin_r16 flex_r_fe_c">
							<text>主管星辰: </text>
						</view>
						<view class="f_28 fw_500 tc_1">
							<text>{{consData.zgxx}}</text>
						</view>
					</view>
					<view class="cntItem flex_r_fs_c">
						<view class="cntItemHeader f_28 fw_500 tc_9 margin_r16 flex_r_fe_c">
							<text>幸运色: </text>
						</view>
						<view class="f_28 fw_500 tc_1">
							<text>{{consData.xyys}}</text>
						</view>
					</view>
					<view class="cntItem flex_r_fs_c">
						<view class="cntItemHeader f_28 fw_500 tc_9 margin_r16 flex_r_fe_c">
							<text>幸运宝石: </text>
						</view>
						<view class="f_28 fw_500 tc_1">
							<text>{{consData.jssw}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="consData.xyhm" class="luckyNum flex_c_fs_c">
				<view class="dividTitle margin_b32 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">幸运数字</view>
					</view>
				</view>
				<view class="luckyNumBox">
					<text class="fw_600 tc_9">{{consData.xyhm}}</text>
				</view>
			</view>
			<view v-if="consData.bxList.length > 0" class="tagsList flex_c_fs_c">
				<view class="dividTitle margin_b84 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">生活表现</view>
					</view>
				</view>
				<view class="tagsListBox flex_r_c_c">
					<block v-for="(item, index) in consData.bxList" :key="index">
						<view class="tagsItem f_28 fw_500 tc_w flex_c_c_c">{{item}}</view>
					</block>
				</view>
			</view>
			<view v-if="consData.ydList.length > 0" class="tagsList flex_c_fs_c">
				<view class="dividTitle margin_b84 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">星座优点</view>
					</view>
				</view>
				<view class="tagsListBox flex_r_c_c">
					<block v-for="(item, index) in consData.ydList" :key="index">
						<view class="tagsItem f_28 fw_500 tc_w flex_c_c_c">{{item}}</view>
					</block>
				</view>
			</view>
			<view v-if="consData.qdList.length > 0" class="tagsList flex_c_fs_c">
				<view class="dividTitle margin_b84 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">星座不足</view>
					</view>
				</view>
				<view class="tagsListBox flex_r_c_c">
					<block v-for="(item, index) in consData.qdList" :key="index">
						<view class="tagsItem f_28 fw_500 tc_w flex_c_c_c">{{item}}</view>
					</block>
				</view>
			</view>
			<view v-if="consData.jbtz" class="essay flex_c_fs_c">
				<view class="dividTitle margin_b24 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">基本特质</view>
					</view>
				</view>
				<view class="essayCnt">
					<text class="f_28 fw_500 tc_8">{{consData.jbtz}}</text>
				</view>
			</view>
			<view v-if="consData.jttz" class="essay flex_c_fs_c">
				<view class="dividTitle margin_b24 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">星座特质</view>
					</view>
				</view>
				<view class="essayCnt">
					<text class="f_28 fw_500 tc_8">{{consData.jttz}}</text>
				</view>
			</view>
			<view v-if="consData.xsfg" class="essay flex_c_fs_c">
				<view class="dividTitle margin_b24 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">行事风格</view>
					</view>
				</view>
				<view class="essayCnt">
					<text class="f_28 fw_500 tc_8">{{consData.xsfg}}</text>
				</view>
			</view>
			<view v-if="consData.gxmd" class="essay flex_c_fs_c">
				<view class="dividTitle margin_b24 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">个性缺点</view>
					</view>
				</view>
				<view class="essayCnt">
					<text class="f_28 fw_500 tc_8">{{consData.gxmd}}</text>
				</view>
			</view>
			<view v-if="consData.zj" class="essay flex_c_fs_c">
				<view class="dividTitle margin_b24 flex_r_c_c">
					<view class="bgLine flex_r_c_c">
						<view class="title f_32 fw_600 tc_1">总体评价</view>
					</view>
				</view>
				<view class="essayCnt">
					<text class="f_28 fw_500 tc_8">{{consData.zj}}</text>
				</view>
			</view>
		</view>
		<fr-custom-selector v-if="selectorVisible"
			:dataList="constellation"
			:curItem="curCons"
			:setting="setting"
			@handleSelect="handleSelect"
			@handleClose="handleClose"></fr-custom-selector>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curCons: '',
				consData: {},
				constellation: [
					{
						id: 'mojie',
						name: '魔羯座',
						date: '12月22日～1月19日',
						icon: 'cons_iconfont iconmojie',
						able: true,
					},
					{
						id: 'shuiping',
						name: '水瓶座',
						date: '1月20日～2月18日',
						icon: 'cons_iconfont iconshuiping',
						able: true,
					},
					{
						id: 'shuangyu',
						name: '双鱼座',
						date: '2月19日～3月20日',
						icon: 'cons_iconfont iconshuangyu',
						able: true,
					},
					{
						id: 'baiyang',
						name: '白羊座',
						date: '3月21日～4月19日',
						icon: 'cons_iconfont iconbaiyang',
						able: true,
					},
					{
						id: 'jinniu',
						name: '金牛座',
						date: '4月20日～5月20日',
						icon: 'cons_iconfont iconjinniu',
						able: true,
					},
					{
						id: 'shuangzi',
						name: '双子座',
						date: '5月21日～6月21日',
						icon: 'cons_iconfont iconshuangzi',
						able: true,
					},
					{
						id: 'juxie',
						name: '巨蟹座',
						date: '6月22日～7月22日',
						icon: 'cons_iconfont iconjuxie',
						able: true,
					},
					{
						id: 'shizi',
						name: '狮子座',
						date: '7月23日～8月22日',
						icon: 'cons_iconfont iconshizi',
						able: true,
					},
					{
						id: 'chunv',
						name: '处女座',
						date: '8月23日～9月22日',
						icon: 'cons_iconfont iconchunv',
						able: true,
					},
					{
						id: 'tiancheng',
						name: '天秤座',
						date: '9月23日～10月23日',
						icon: 'cons_iconfont icontiancheng',
						able: true,
					},
					{
						id: 'tianxie',
						name: '天蝎座',
						date: '10月24日～11月22日',
						icon: 'cons_iconfont icontianxie',
						able: true,
					},
					{
						id: 'sheshou',
						name: '射手座',
						date: '11月23日～12月21日',
						icon: 'cons_iconfont iconsheshou',
						able: true,
					},
				],
				selectorVisible: false,
				setting: {
					title: '请选择星座',
					nameKey: 'name',
					descKey: 'date',
					valueKey: 'id',
				}
			};
		},
		onLoad() {
			this.curCons = this.$tool.getConstellation()
			this.getData()
		},
		onShow() {},
		methods: {
			getData() {
				const _this = this
				const local = uni.getStorageSync('moon|consList')? uni.getStorageSync('moon|consList').find((item) => item.name === _this.curCons.name):null
				if(local) {
					_this.consData = local
					return
				}

				const key = 'ef3089a293e7fd058bdae791cd735b12'
				const url = 'https://apis.juhe.cn/fapig/constellation/query'
				_this.$api.get({
					url: url,
					// loadingTip: this.refresh ? '获取数据中...' : '',
					data: {
						keyword: _this.curCons.name,
						key: key
					},
					success: res => {
						_this.consData = res.result
						_this.consData.bxList = _this.consData.bx ? _this.consData.bx.split('、'):[]
						_this.consData.ydList = _this.consData.yd ? _this.consData.yd.split('，'):[]
						_this.consData.qdList = _this.consData.qd ? _this.consData.qd.split('，'):[]
						
						let consList = uni.getStorageSync('moon|consList') || []
						consList.push(_this.consData)
						uni.setStorageSync('moon|consList', consList)
					},
					fail: err => {}
				})
			},
			showSelector() {
				this.selectorVisible = true
			},
			handleSelect(e) {
				this.curCons = e
				this.getData()
				this.selectorVisible = false
			},
			handleClose() {
				this.selectorVisible = false
			}
		},
	}
</script>

<style lang="scss" scoped>
.pageBg {
	padding: 48rpx;
	box-sizing: border-box;
	.container {
		width: 100%;
		// height: 100%;
		padding: 48rpx;
		box-sizing: border-box;
		.header {
			width: 100%;
			height: 100rpx;
			position: relative;
			margin-bottom: 64rpx;
			.consIcon {
				font-size: 380rpx;
				position: absolute;
				top: -140rpx;
				right: -36px;
				color: #fff;
				transform: rotate(20deg);
			}
		}
		.baseInfo {
			width: 100%;
			.cnt {
				.cntItem {
					width: 100%;
					height: 60rpx;
					.cntItemHeader {
						width: 120rpx;
					}
				}
			}
		}
		.luckyNum {
			margin-bottom: 64rpx;
			.luckyNumBox {
				display: inline-block;
				padding: 28rpx;
				box-sizing: border-box;
				border: 2rpx solid #CCC;
				font-size: 80rpx;
				border-radius: 8rpx;
			}
		}
		.tagsList {
			margin-bottom: 84rpx;
			.tagsListBox {
				width: 100%;
				.tagsItem {
					height: 46rpx;
					padding: 0 12rpx;
					border-radius: 8rpx;
					margin: 0 16rpx;
				}
				.tagsItem:nth-child(odd) {
					background-color: #65DBC5;
				}
				.tagsItem:nth-child(even) {
					background-color: #5FA3F8;
				}
			}
		}
		.essay {
			.essayCnt {
				text-indent: 56rpx;
				margin-bottom: 64rpx;
			}
		}
	}
}
.shadowBox {
	background: #F2F2F2;
	box-shadow: -10rpx -10rpx 16rpx rgba(255, 255, 255, 0.76), 6rpx 6rpx 24rpx #E4E4E4, inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5);
	border-radius: 24rpx;
}
/* 倒三角 */
.down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 20rpx 12rpx 0 12rpx;
   border-color:  #111 transparent transparent transparent;
}
.dividTitle {
	width: 100%;
	height: 60rpx;
	.bgLine {
		width: 100%;
		height: 2rpx;
		background-color: #CCC;
		.title {
			width: 200rpx;
			text-align: center;
			background-color: #F2F2F2;
		}
	}
}
</style>
